<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Example: Watermark</title>
		<!-- XBL -->
		<script src="../../../version/current/xbl.js" type="text/javascript"></script>
		<!-- CSS -->
		<style type="text/css">
			/* Page style */
			body {
				font-family: Verdana;
			}
			p {
				font-size: small;
				width: 50em;
			}
			.without {
				background-color: pink;
				padding: 0.5em;
			}
			.with {
				background-color: lightgreen;
				padding: 0.5em;
			}
			/* Bind implementation */
			input.watermark {
				binding: url("watermark.xml#watermark");
			}
		</style>
	</head>
	<body>
		<h3>Example: Watermark</h3>
		<p>
			Watermark is a behavior of a component when it displays its "default" value grayed
			as long as user doesn't interact with the component or have its value left blank.
		</p>
		<h5>Without "watermark" binding bound</h5>
		<div class="without">
			<form onsubmit="return false;">
				<input type="text" value="Search here..." />
				<input type="submit" value="submit" />
			</form>
		</div>

		<h5>With "watermark" binding bound</h5>
		<div class="with">
			<form onsubmit="return false;">
				<input type="text" value="Search here..." class="watermark"/>
				<input type="submit" value="submit" />
			</form>
		</div>
		<br />
		Binding source code: <a href="watermark.xml#watermark">watermark.xml#watermark</a>

	</body>
</html>